import React,{Component} from 'react';
import {connect} from 'react-redux'
import  {fetchNews}  from '../actions'
import { NavLink } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink , Breadcrumb , BreadcrumbItem  } from 'reactstrap';

var PAGE=1;
const mapStateToProps = (state)=>{
    return {
        ...state.news
    }
}
class News extends Component{
    componentDidMount(){
        this.props.fetchNews();     
    }
    //显示一页新闻
    getnews(){
        var pageData=this.props.list.pageData;
        if(pageData.length > 0){
            var jxt=[];
            for(let i=0;i<pageData.length;i++){
                var url=`/news/${i}`;
                jxt.push(
                    <NavLink to={url} key={i} style={{color:"#000"}}>
                        <div key={i} >
                            <div className="thumbnail" style={{border:"1px solid #333",padding:"10px"}}>
                                <div className="caption" >
                                    <h4>{pageData[i].title}</h4>
                                    <p>作者 ：{pageData[i].author}</p>
                                    <p>{pageData[i].time}</p>
                                    <p>{pageData[i].content}</p>
                                </div>
                            </div>
                        </div>
                    </NavLink>
                )
            }
            return jxt;
        }else{
            return null;
        }
    }
    render(){
        const{list,fetchNews}=this.props;
        /* console.log(123)
        console.log(this.props) */
        return (
            <div style={{fontSize:"1.5rem"}}>
                <div className="panel panel-success" style={{fontSize:"1.5rem"}}>
                    <div className="panel-body">
                        {this.getnews()}
                    </div>
                </div>     
            </div>
        )
   }
}

export default connect(mapStateToProps,{fetchNews})(News);
